<template>
  <div :class="[$style.reconnect, equ === 'pc' ? $style['reconnect-pc'] : '']">
    <div class="flc relative z-1 flex-col" :class="$style.content_re">
      <img v-show="ttsa.reconnecting || ['start', 'error'].includes(ttsa.reconnecStatus)"
        src="@/assets/white-theme/images/offline.png" :class="$style.icon" />
      <img v-show="ttsa.reconnecStatus === 'success'" src="@/assets/white-theme/images/online.png" :class="$style.icon" />
      <template v-if="ttsa.reconnecting">
        <p class="text-16px leading-23px font-bold">Oops~网络失联了</p>
        <p class="text-14px leading-23px">小镜正在重新建立连接...</p>
        <button :class="$style.reconnectBtn" disabled>连接中... ({{ time }}s)</button>
      </template>
      <template v-else-if="['start', 'error'].includes(ttsa.reconnecStatus)">
        <p class="text-16px leading-23px font-bold">Oops~网络失联了</p>
        <p class="text-14px leading-23px">动动小手，重新连接吧…</p>
        <button :class="$style.reconnectBtn" @click="handToHome">重新连接</button>
      </template>
      <template v-else>
        <p class="text-16px leading-23px font-bold">连接已经重新建立</p>
        <p class="text-14px leading-23px">小镜欢迎你回来</p>
        <button :class="$style.reconnectBtn" @click="handReconnect">继续沟通</button>
      </template>
    </div>
  </div>
</template>

<script lang="ts" setup name="Reconnect">
import { useTtsaStore } from '@/store/ttsa';
import { equ } from '@env';

const ttsa = useTtsaStore()

const handReconnect = () => {
  const video: HTMLMediaElement = document.querySelector('#ttsa video')
  if (video) video.play()
  ttsa.voiceLoading = false
  ttsa.goon()
  ttsa.reconnecStatus = ''
}

const time = ref(5)

let timer = null

const clearTimer = () => {
  if (timer) {
    clearInterval(timer)
    timer = null
  }
}

watch(() => ttsa.reconnecting, (v) => {
  if (v) {
    timer = setInterval(() => {
      time.value -= 1
      if (time.value <= 0) {
        clearTimer()
        ttsa.reconnecting = false
      }
    }, 1000)
  } else {
    clearTimer()
    time.value = 5
    if (equ === 'pc' && !['start', 'error'].includes(ttsa.reconnecStatus)) {
      handReconnect()
    }
  }
})

const handToHome = () => {
  ttsa.init()
  ttsa.reconnecStatus = ''
}

</script>

<style module lang="scss">
.reconnect {
  @apply absolute-full z-9999 flc flex-col;

  &::before {
    content: '';
    @apply absolute-full z-0 backdrop-filter backdrop-blur-5;
    background-color: rgba(0, 0, 0, 0.15);
  }

  .content_re {
    padding: 20px 50px;
    color: #3A5277;
    letter-spacing: 1px;
    line-height: 23px;

    &>* {
      @apply relative z-1;
    }

    &:after {
      content: '';
      @apply absolute-full z-0 backdrop-filter backdrop-blur-8px;
      background: rgba(239, 247, 255, 0.6);
      border-radius: 10px;
      box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.15);
    }

    .icon {
      width: 52px;
      height: 37px;
      margin-bottom: 18px;
    }
  }

}

.reconnectBtn {
  background-color: #4673EE;
  color: white;
  padding: 8px 26px;
  white-space: nowrap;
  border-radius: 6px;
  font-size: 14px;
  margin-top: 27px;
  letter-spacing: 3px;
  user-select: none;

  &:disabled {
    background: #7C9CE3 !important;
    padding: 8px 12px;
  }

  &:active {
    background-color: #235BD7;
  }
}

.reconnect.reconnect-pc {
  .content_re {
    padding: 20px 66px;

    &:after {
      @apply backdrop-blur-5px;
      background: linear-gradient(180deg, rgba(227, 242, 255, 0.88) 0%, rgba(205, 234, 255, 0.78) 100%);
      border-radius: 20px;
      border: 1px solid rgba(255, 255, 255, 0.6);
    }
  }

  .reconnectBtn {
    background: linear-gradient(360deg, rgba(255, 255, 255, 0.5) 0%, rgba(244, 250, 255, 0.5) 2%, rgba(255, 255, 255, 0.8) 100%);
    border-radius: 20px;
    color: #0B1633;
    font-weight: bold;
    padding: 8px 40px;

    &::before,
    &::after {
      content: '';
      @apply block w-12px h-12px rounded-1/2 absolute-y-center;
      background-image: radial-gradient(#fff 30%, #fff 30.1%, rgba(255, 255, 255, 0.2) 30.2%, rgba(255, 255, 255, 0.2) 100%);
      border: 1px solid rgba(255, 255, 255, 0.6);
    }

    &::before {
      left: 12px;
    }

    &::after {
      right: 12px;
    }

    &:disabled {
      background: linear-gradient(360deg, rgba(255, 255, 255, 0.5) 0%, rgba(244, 250, 255, 0.5) 2%, rgba(255, 255, 255, 0.8) 100%) !important;
      opacity: 0.6;
    }

    &:active {
      background: linear-gradient(360deg, rgba(218, 218, 218, 0.5) 0%, rgba(244, 250, 255, 0.5) 2%, rgba(218, 218, 218, 0.8) 100%);
    }
  }
}

.loading {
  font-size: 27px;
  margin-bottom: 16px;
  animation: loading 1s infinite linear;
}

@keyframes loading {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}
</style>